<template>
	<view class="alreadyBid">
		<view class="list">
			<view class="userInfo">
				<image :src="v.user.headimgurl" mode="" class="userLogo"></image>
				<view class="right disFlex">
					<view class="line1 disFlex one">
						<view>
							<text class="name">{{v.user.nickname}}</text>
							<text class="addr">({{v.city.shortname}})</text>
						</view>
					
					</view>
					<view class="infos">
						<view>{{v.create_time}}</view>
					</view>
				</view>
			</view>
			<view class="content ">
				<view class="word line3">{{v.content}}</view>
				<view class="allWord">全文</view>
			</view>
			<view class="imgs">
				<image v-for="(item,i) in v.img" :key='i' :src="item" mode=""></image>
			</view>
			<view class="lables">
				<view v-for="(val,i) in tab" :key='i'>{{val}}</view>
			</view>
			<view class="timeBox disFlex">
				<view class="statusBox">
					<text class="status" style="font-size: 26rpx;">开标时间：{{v.update_time}}</text>
				</view>
				<view class="time">已有{{v.order_count}}名厂家投标</view>
			</view>
			
		</view>
		<view class="box10">
			<view class="boxInfo">
				<view class="disFlex scale-1px-bottom box">
					<view class="left">联系人</view>
					<view class="right">{{v.name}}</view>
				</view>
				<view class="disFlex box scale-1px-bottom">
					<view class="left">微信</view>
					<view class="right">{{v.wx_number}}</view>
				</view>
				<view class="disFlex scale-1px-bottom box">
					<view class="left">手机号</view>
					<view class="right">{{v.phone}}</view>
				</view>
			</view>
		</view>
		
		<view class="box10">
			<view class="boxInfo">
				<view class="title">中标工厂</view>
				<view class="disFlex scale-1px-bottom box" v-for="(v,i) in factorys.main" :key='i'>
					<view class="left">{{v.factory.factory_name}}</view>
					<view class="right" style="color: #2291FF;" @tap="getnav(router(`factoryDetail?id=${v.factory.id}`))">查看</view>
					
				</view>
				<view class="disFlex scale-1px-bottom box" v-for="(v,i) in factorys.standby" :key='i'>
					<view class="left">{{v.factory.factory_name}}(备选)</view>
					<view class="right" style="color: #2291FF;" @tap="getnav(router(`factoryDetail?id=${v.factory.id}`))">查看</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled:false,
				v:'',
				tab:[],
				id:'',
				factorys:'',
			}
		},
		onLoad(option) {
			this.id=option.id
			this.getinfo(option.id)
			this.getfactory()
		},
		methods: {
			getinfo(id){
				this.http('/api/tender/read', 'post', {id}, )
					.then((res) => {
						this.v=res.data
						console.log(this.v)
						this.tab.push(res.data.industry.name)
						this.tab.push('展位大小'+res.data.acreage+'m²')
						this.tab.push('预算'+res.data.cost+'元')
					})
			},
			getfactory(id){
				this.http('/api/tender_order/lists', 'post', {id:this.id}, )
					.then((res) => {
						this.factorys=res.data
						console.log(this.factorys)
					})
			},
		}
	}
</script>

<style lang="less">
	.alreadyBid{
		padding-bottom: 100rpx;
		.list{
			padding: 40rpx;
			.userInfo{
				display: flex;
				align-items: center;
				.userLogo{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
				.right{
					display: flex;
					align-items: center;
					height: 90rpx;
					padding-left: 20rpx;
					flex: 1;
					.one{
						width: 100%;
						.name{
							font-size: 36rpx;
							font-weight: bold;
						}
						.time{
							color: #BEC9D7;
						}
					}
				}
			}
			.content{
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				.allWord{
					color: #2291FF;
					width: 60rpx;
				}
			}
			.imgs{
				display: grid;
				grid-template-columns: repeat(3, 210rpx);
				grid-column-gap: 20rpx;
				grid-row-gap: 20rpx;
				margin-top: 40rpx;
				image{
					width: 100%;
					height: 210rpx;
				}
			}
			.timeBox{
				margin-top: 40rpx;
				.statusBox{
					display: flex;
					align-items: center;
					.status{
						color: #FE7203;
						font-size: 32rpx;
						font-weight: bold;
					}
					.word{
						font-size: 24rpx;
						color: #BEC9D7;
					}
				}
				.time{
					font-size: 24rpx;
					color: #BEC9D7;
				}
			}
			.lables{
				margin-top: 50rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				width: calc(100% + 20rpx);
				view{
					height:60rpx;
					line-height: 60rpx;
					background:rgba(255,241,229,1);
					border-radius:30rpx 0px 30rpx 30rpx;
					font-size: 26rpx;
					color: #FE7203;
					padding: 0 30rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		.boxInfo{
			background-color: #fff;
			padding: 0 40rpx;
			.title{
				padding: 35rpx 0 25rpx 0;
				font-size:36rpx;
				font-weight:bold
			}
			.box{
				padding: 35rpx 0;
				.left{
					font-size:32rpx;
				}
				.right{
					color: #BEC9D7;
				}
				.cBox{
					display: flex;
					align-items: center;
					.text{
						color: #BEC9D7;
						padding-right: 26rpx;
					}
					.copy{
						width: 30rpx;
						height: 34rpx;
					}
				}
			}
		}
		
		.bottom{
			position: fixed;
			width: 100%;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 99;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow:0px -3px 6px rgba(104,148,185,0.2);
			padding: 0 32rpx;
			button{
				flex: 1;
				font-size:32rpx;
				height:88rpx;
				line-height: 88rpx;
				&:first-child{
					background:rgba(34,145,255,.1) !important;
					color: #2291FF;
				}
				&:last-child{
					margin-left: 20rpx;
					background: #2291FF !important;
					color: #fff;
				}
			}
		}
	}
</style>
